<template>
  <div>
    <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start"> 批量反馈 </a-button>
    <!-- table -->
    <a-table
      :row-key="(a, b) => a.id"
      :columns="columns"
      class="mg_t24"
      list-type="picture"
      :pagination="pagination"
      :data-source="dataSource"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      @change="handlePage"
    >
      <template slot="status" slot-scope="text, record">
        <span class="round" :class="['no', 'ok', 'err'][record.status]" />
        {{ ["未完成", "已完成", "异常"][record.status] }}
      </template>
      <template slot="action" slot-scope="text, record">
        <span class="primary" @click="handelEvent(record)">反馈</span>
      </template>
      <div slot="expandedRowRender" slot-scope="text" class="expend-box" style="padding: 0; margin: 0">
        <a-row type="flex" align="middle">
          <a-col class="info-left">
            <a-row class="center">
              <a-avatar :key="text.empPhoto" :src="text.empPhoto" :size="64" />
            </a-row>
            <a-row class="center name">
              <strong>{{ text.name }}</strong>
            </a-row>
            <a-divider :dashed="true" />

            <a-row class="info-item">
              <a-col class="sub_tit" :span="12">身份证号</a-col>
              <a-col :span="12">{{ text.idCard }}</a-col>
            </a-row>
            <a-row class="info-item">
              <a-col class="sub_tit" :span="12">个人社保号</a-col>
              <a-col :span="12">--</a-col>
            </a-row>
            <a-row class="info-item">
              <a-col class="sub_tit" :span="12">个人公积金号</a-col>
              <a-col :span="12">--</a-col>
            </a-row>
            <a-row class="info-item">
              <a-col class="sub_tit" :span="12">参保城市</a-col>
              <a-col :span="12">{{ text.socCityName }}</a-col>
            </a-row>
            <a-row class="info-item">
              <a-col class="sub_tit" :span="12">缴纳方案</a-col>
              <a-col :span="12">{{ text.socProgName }}</a-col>
            </a-row>
            <a-divider :dashed="true" />
          </a-col>
          <a-col style="flex: 1">
            <a-table
              :row-key="(a, b) => b"
              :columns="innerColumns"
              :data-source="text.socDispatchEmpItemList.filter((item) => item.isNowItem) || []"
              :pagination="false"
            >
              <template slot="persentPersonal" slot-scope="persentPersonal"> {{ persentPersonal }}% </template>
              <template slot="persentCompany" slot-scope="persentCompany"> {{ persentCompany }}%</template>
            </a-table>
            <a-row type="flex" class="inner-right-foot">
              <a-col :span="15">
                <strong>缴费合计</strong>
              </a-col>
              <a-col :span="3" class="center">
                <strong>{{ text.personalAmount || "--" }}</strong>
              </a-col>
              <a-col :span="3" class="center">
                <strong>{{ text.companyAmount || "--" }}</strong>
              </a-col>
              <a-col :span="3" class="center">
                <strong>
                  <span class="primary">{{ text.allAmount || "--" }}</span>
                </strong>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <div />
      </div>
    </a-table>
  </div>
</template>

<script>
const columns = [
  { title: "", dataIndex: "window", scopedSlots: { customRender: "window" } },
  { title: "姓名", dataIndex: "name" },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  { title: "参保方案", dataIndex: "socProgName" },
  { title: "指派公司", dataIndex: "assignCompanyName" },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];
const innerColumns = [
  {
    title: "缴纳项目",
    dataIndex: "itemName",
    align: "center",
    ellipsis: true
  },
  {
    title: "缴费基数",
    dataIndex: "cardinalityDefault",

    align: "center",
    ellipsis: true
  },
  {
    title: "个人比列",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" },
    align: "center",
    ellipsis: true
  },
  {
    title: "公司比例",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" },
    align: "center",
    ellipsis: true
  },
  {
    title: "个人缴费",
    dataIndex: "amountPersonal",

    align: "center",
    ellipsis: true
  },
  {
    title: "公司交费",
    dataIndex: "amountCompany",

    align: "center",
    ellipsis: true
  },
  {
    title: "缴费合计",
    dataIndex: "",
    scopedSlots: { customRender: "all" },
    align: "center",
    ellipsis: true
  }
];
export default {
  name: "TableDetail",
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      innerColumns,

      columns,
      dataSource: [],
      pagination: {
        pageSize: 10,
        total: 0
      },
      loading: false,
      list: [],
      selectedRowKeys: [],
      selectedRows: []
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  watch: {
    options(val) {
      this.pagination.total = val.entityCount;
      this.dataSource = val.entities;
    }
  },

  methods: {
    handelEvent(e) {
      this.$emit("change", { visible: true, e });
    },
    handlePage({ current }) {
      this.$emit("change", { current });
    },
    openDetail(e) {},
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.$emit("change", {
          visible: true,
          all: true,
          list: this.list,
          selectedRows: this.selectedRows
        });
        //  this.selectedRowKeys = [];
      });
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.list = selectedRows.map((v) => v.id);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    }
  }
};
</script>

<style lang="scss" scoped>
.inner-box {
  display: flex;
  flex-direction: row;
  height: 600px;
  .inner-left {
    width: 300px;
  }
  .inner-right {
    width: calc(100% - 300px);
  }
}
.center {
  text-align: center;
}
.info-left {
  border-right: 1px solid #ccc;
  padding: 20px 56px 30px 0;
  width: 350px;

  .info-item {
    line-height: 34px;
  }
  .name {
    margin-top: 16px;
  }
}
.inner-right-foot {
  padding: 16px;
}
.round {
  height: 8px;
  width: 8px;
  display: inline-block;
  border-radius: 8px;
}
.no {
  background: #fd7d4c;
}
.ok {
  background: #48cb9e;
}
.err {
  background: red;
}
</style>
